<template>
  <view class="timer-container">
    <text class="label">回合时间：{{ currentTime }}秒</text>
    <slider
      v-if="isHost"
      :value="currentTime"
      min="3"
      max="60"
      @change="handleChange"
      class="slider"
    />
    <text v-else class="readonly-time">当前回合时间：{{ currentTime }}秒</text>
    <view class="preview">
      <text>预览：</text>
      <countdown 
        :time="currentTime * 1000"
        format="ss"
        class="countdown"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isHost: {
      type: Boolean,
      default: false
    },
    currentTime: {
      type: Number,
      required: true
    }
  },
  methods: {
    handleChange(e) {
      this.$emit('change', e.detail.value);
    }
  }
}
</script>

<style>
.timer-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label {
  font-size: 14px;
  color: #333333;
}

.slider {
  width: 200px;
}

.readonly-time {
  font-size: 14px;
  color: #666666;
}

.preview {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #666666;
}

.countdown {
  color: #2196F3;
  font-weight: bold;
}
</style>
